const {merge} = require("webpack-merge");
const common = require("./webpack.common.js");
const Dotenv = require('dotenv-webpack');
const path = require("path");
const webpack = require('webpack');

module.exports = merge(common, {
    mode: "development",
    devtool: 'inline-source-map',
    plugins: [
        new Dotenv({
            path: path.join(__dirname, `/env/.env.development`)//配置环境变量
        }),
        new webpack.HotModuleReplacementPlugin(), // 启用HMR插件
    ],
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'style-loader',// css注入到dom中，以此提升热更新的速度
                    'css-loader',// 将css转换为commonjs模块
                    'sass-loader'// 将sass编译成css
                ]
            }
        ]
    },
    devServer: {
        port: 3999,//端口
        open: true,//自动打开浏览器
        hot: true,//热更新
        historyApiFallback: true,//解决404问题
        static: {
            directory: path.join(__dirname, "./dist"),
        },
        client: {
            overlay: { // 出现编译警告或错误时是否全屏覆盖
                errors: true,
                warnings: false,
            },
        },
    }
})
